<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
        <style type="text/css">
                                html, body {
                                    font: normal 12px verdana;
                                    margin: 0;e
                                    padding: 0;
                                    border: 0 none;
                                    overflow: hidden;
                                    height: 100%;
                                }
                                
                    
        </style>
        <script type="text/javascript" src="extjs/adapter/ext/ext-base.js">
        </script>
        <script type="text/javascript" src="extjs/ext-all.js">
        </script>
		<script type="text/javascript" src="extjs/miframe.js">
        </script>
       
        <script type="text/javascript" src="js/LeftPanel.js">
        </script>
        <script type="text/javascript" src="js/StudySampleTableView.js">
        </script>
        <script type="text/javascript" src="js/CellFactorSampleTableView.js">
        </script>
        <script type="text/javascript" src="js/SamplePanel.js">
        </script>
        <script type="text/javascript">
            
            
            // center tab panel
            var centerPanel = new Ext.TabPanel({
                title: 'Center Region',
                region: 'center', // center region is required, no width/height specified
                resizeTabs: true, // turn on tab resizing
                minTabWidth: 155,
                tabWidth: 185,
                enableTabScroll: true,
                margins: '5 5 0 0',
                activeTab: 0,
				defaults: {autoScroll:true},
                items: [{
                    title: 'By study',
                    layout: 'fit',
                    items: [studySampleTableView]
                }, cellFactorSampleTableView]
            });
            
            
            // header of the website
            var northPanel = new Ext.BoxComponent({ // raw
                region: 'north',
                height: 100,
                margins: '5 5 5 5',
                style: 'background-image:url(./img/Grap.png);background-repeat:no-repeat;'
            });
            
            
            
            // border layout of the view port
            Ext.onReady(function(){
                var container = new Ext.Viewport({
                    layout: "border",
                    items: [northPanel, westTreePanel, centerPanel]
                });
            });
        </script>
    </head>
    <body>
    </body>
</html>
